<template>
  <div id="WaitToTRavel">
    <NavBarTitle :NavBarTitle="NavBarTitle" />
    <!--头-->
    <div class="title flex space-around aCenter">
      <div>
        <div>{{ order_status | carStatuss }}</div>
        <div class="order_sn">订单编号：{{ order_number }}</div>
      </div>
      <div>
        <div
          style="width: 75px"
          class="flex column aCenter"
          v-if="
            order_status == 1 ||
            order_status == 2 ||
            order_status == 3 ||
            order_status == 4
          "
          @click="show = true"
        >
          <div class="iconfont"><span class="iconfont">&#xe600;</span></div>
          <div>乘车二维码</div>
        </div>
        <div v-if="order_status == 0">付款查看二维码</div>
      </div>
    </div>
    <!--车票信息-->
    <div class="ticketTitle flex aCenter">
      <span style="margin-left: 17px">车票信息</span>
    </div>
    <div class="toTravel flex aCenter between">
      <div style="margin-left: 30px">
        <div class="city">{{ citysname }}</div>
        <div class="Station">{{ s_site }}</div>
      </div>
      <div class="ban flex column aCenter">
        <div class="type">{{ typestr }}</div>
        <div>
          <div class="arrow"></div>
          <div class="rotate"></div>
        </div>
        <div class="type">{{ mileage }}公里</div>
      </div>
      <div style="margin-right: 30px">
        <div class="city">{{ cityename }}</div>
        <div class="Station">{{ e_site }}</div>
      </div>
    </div>
    <div class="toTravel flex column space-around">
      <div class="Departure">
        上车点：<span v-if="s_address == ''">{{ s_site }}</span
        ><span v-if="s_address != ''">{{ s_address}}</span>
      </div>
      <div class="Departure">
        下车点：<span v-if="e_site == ''">{{ e_site }}</span
        ><span v-if="e_site != ''">{{ e_address }}</span>
      </div>
    </div>

    <div class="overTime flex aCenter jCenter">
      {{ day | timeFormat
      }}<span style="margin-left: 15px">{{ hour }}前有效</span>
    </div>
    <!--车辆信息-->
    <div class="ticketTitle flex aCenter">
      <span style="margin-left: 17px">车辆信息</span>
    </div>
    <template>
      <van-field readonly v-model="name" label="联系人" input-align="right" />
      <van-field
        readonly
        v-model="mobile"
        label="工作人员联系电话"
        input-align="right"
      />
      <van-field
        readonly
        v-model="Seat_num"
        label="座位号"
        input-align="right"
      />
      <van-field
        readonly
        v-model="car_num"
        label="车牌号"
        input-align="right"
      />
    </template>
    <div style="width: 100%; height: 7px; background-color: #f2f5fa" />
    <!--乘客信息-->
    <div class="ticketTitle flex aCenter">
      <span style="margin-left: 17px">乘客信息</span>
    </div>
    <div class="userInfoF flex column aCenter">
      <template v-for="item in list">
        <div class="userInfo flex between aCenter">
          <div>{{ item.name }}</div>
          <div>{{ item.telephone | noneNum }}</div>
          <div>{{ item.idcard }}</div>
        </div>
      </template>
    </div>
    <div style="width: 100%; height: 7px; background-color: #f2f5fa" />
    <!--订单金额-->
    <div class="moneyF flex jCenter">
      <div class="money flex aCenter between">
        <div>订单金额</div>
        <div class="money_num">￥{{ order_price }}</div>
      </div>
    </div>
    <div style="width: 100%; height: 7px; background-color: #f2f5fa" />
    <div class="btn flex">
      <div v-if="order_status == 1 || order_status == 2">
        <van-button
          plain
          round
          hairline
          type="primary"
          color="#0fa0a0"
          @click="toRebook()"
          >改签申请
        </van-button>
      </div>
      <div v-if="order_status == 0">
        <van-button
          plain
          round
          @click="wxPay"
          hairline
          type="primary"
          color="#0fa0a0"
          >立即支付</van-button
        >
      </div>
      <div v-if="order_status == 0 || order_status == 1 || order_status == 2">
        <van-button @click="cancelOrder" plain round hairline type="primary"
          >取消订单</van-button
        >
      </div>
    </div>
    <div style="height: 60px"></div>
    <!--遮罩层-->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop="show = false">
        <div class="block flex column aCenter">
          <div class="QRCodeTitle">请出示乘车二维码</div>
          <div class="QRCode_img"><img :src="codeimg" /></div>
          <div class="QRCode_sn flex aCenter jCenter">{{ codenum }}</div>
          <div class="remarks">
            温馨提示：为了更好的保护您的利益，请不要轻易将您的二维码泄露给他人
          </div>
        </div>
      </div>
    </van-overlay>
    <Loading :isLoading="isLoading" />
  </div>
</template>

<script>
import NavBarTitle from "components/NavBarTitle.vue";
import Loading from "components/Loading.vue";
import { Dialog } from "vant";

export default {
  data() {
    return {
      NavBarTitle: "订单详情",
      show: false,
      name: "",
      mobile: "",
      Seat_num: "",
      car_num: "",
      order_number: "",
      order_status: "",
      typestr: "",
      mileage: "",
      s_address: "",
      s_site: "",
      e_address: "",
      e_site: "",
      citysname: "",
      cityename: "",
      day: "",
      hour: "",
      order_price: "",
      codenum: "",
      codeimg: "",
      sitesname: "",
      siteename: "",
      sitesid: "",
      siteeid: "",
      id: "",
      departuretime: "",
      list: [],
      car: [],
      isLoading: true,
    };
  },
  filters: {
    noneNum(val) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return val.replace(reg, "$1****$2");
    },
  },
  components: {
    NavBarTitle,
    Loading,
    [Dialog.name]: Dialog,
  },
  methods: {
    wxPay() {
      let data = {
        token: this.$store.state.token,
        id: this.id,
      };
      this.$axios
        .post(this.$index + this.$api.home.payorder, this.$Qs.stringify(data))
        .then((res) => {
          console.log(res);
          if (res.data.flag) {
            this.onBridgeReady(
              res.data.data.pay.appId,
              res.data.data.pay.timeStamp,
              res.data.data.pay.nonceStr,
              res.data.data.pay.package,
              res.data.data.pay.signType,
              res.data.data.pay.paySign
            );
          } else {
            this.$toast(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onBridgeReady(appId, timeStamp, nonceStr, package_, signType, paySign) {
      console.log("进了支付方法");
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: appId, //公众号名称，由商户传入
          timeStamp: timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: nonceStr, //随机串nonceStr
          package: package_,
          signType: signType, //微信签名方式：
          paySign: paySign, //微信签名
        },
        function (res) {
          this.$toast(res.err_msg);
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            this.$router.replace("/myorder");
          }
        }
      );
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.onBridgeReady(
              appId,
              timeStamp,
              nonceStr,
              package_,
              signType,
              paySign
            ),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent(
            "WeixinJSBridgeReady",
            this.onBridgeReady(
              appId,
              timeStamp,
              nonceStr,
              package_,
              signType,
              paySign
            )
          );
          document.attachEvent(
            "onWeixinJSBridgeReady",
            this.onBridgeReady(
              appId,
              timeStamp,
              nonceStr,
              package_,
              signType,
              paySign
            )
          );
        }
      } else {
        // this.onBridgeReady(appId, timeStamp, nonceStr, package_, signType, paySign);
      }
    },
    cancelOrder() {
      let data = {
        token: this.$store.state.token,
        id: this.id,
      };
      Dialog.confirm({
        title: "确认取消订单",
        confirmButtonColor: "#0fa0a0",
      })
        .then(() => {
          this.$axios
            .post(
              this.$index + this.$api.order.cancel,
              this.$Qs.stringify(data)
            )
            .then((res) => {
              console.log(res);
              if (res.data.flag) {
                this.$toast.success({
                  message: res.data.msg,
                  duration: 1000,
                  onClose: () => {
                    this.$router.push("/myorder");
                  },
                });
              } else {
                this.$toast(res.data.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    toRebook() {
      let departuretime_ = this.departuretime.replace(/-/g, "/");
      let dayC = new Date(departuretime_);
      let Y = dayC.getFullYear();
      let M = dayC.getMonth() + 1;
      let D = dayC.getDate();
      let date = Y + "/" + M + "/" + D;
      this.$router.push({
        path: "/Rebook",
        query: {
          sid: this.sitesid,
          ssite: this.sitesname,
          eid: this.siteeid,
          esite: this.siteename,
          day: date,
          order_id: this.id,
        },
      });
    },
  },
  beforeMount() {},
  filters: {
    timeFormat(val) {
      // let index=val.lastIndexOf("-");
      // let valo =val.substring(index+1,val.length);
      // let indexD = val.indexOf("-");
      // let valt = val.substring(0,indexD);
      // return valt + '月' + valo + '日'
      return val;
    },
    carStatuss(status) {
      if (status == 0) {
        return "待支付";
      } else if (status == 1 || status == 2) {
        return "未出行";
      } else if (status == 3) {
        return "已完成";
      } else if (status == 4) {
        return "已退款";
      }
    },
  },
  created() {
    let data = {
      token: this.$store.state.token,
      id: this.$route.query.id,
    };
    this.$axios
      .post(this.$index + this.$api.order.orderInfo, this.$Qs.stringify(data))
      .then((res) => {
        console.log(res);
        if (res.data.flag) {
          if (res.data.data.car.length == "0") {
            this.name = this.mobile = this.Seat_num = this.car_num = "待出";
          } else {
            this.name = res.data.data.car.name;
            this.mobile = res.data.data.car.telephone;
            this.Seat_num = res.data.data.car.seat_number;
            this.car_num = res.data.data.car.plate;
          }
          this.sitesid = res.data.data.info.sitesid;
          this.siteeid = res.data.data.info.siteeid;
          this.id = res.data.data.info.id;
          this.departuretime = res.data.data.info.departuretime;
          this.order_number = res.data.data.info.order_number;
          this.order_status = res.data.data.info.order_status;
          this.typestr = res.data.data.info.typestr;
          this.mileage = res.data.data.info.mileage;
          this.s_address = res.data.data.info.s_address;
          this.s_site = res.data.data.info.s_site;
          this.e_address = res.data.data.info.e_address;
          this.e_site = res.data.data.info.e_site;
          this.citysname = res.data.data.info.citysname;
          this.cityename = res.data.data.info.cityename;
          this.sitesname = res.data.data.info.sitesname;
          this.siteename = res.data.data.info.siteename;
          this.day = res.data.data.info.day;
          this.hour = res.data.data.info.hour;
          this.order_price = res.data.data.info.order_price;
          this.codenum = res.data.data.info.codenum;
          this.codeimg = res.data.data.info.codeimg;
          this.list = res.data.data.passenger;
          this.car = res.data.data.car;
          this.isLoading = false;
        } else {
          this.$toast(res.data.msg);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.QRCodeTitle {
  font-size: 16px;
  color: #333333;
  margin-top: 40px;
}
.QRCode_img {
  width: 165px;
  height: 165px;
  margin-top: 36px;
}
.QRCode_img > img {
  width: 165px;
  height: 165px;
}
.QRCode_sn {
  width: 165px;
  height: 34px;
  margin-top: 30px;
  font-size: 13px;
  color: #333333;
  background-color: #f7f7f7;
}
.remarks {
  margin-top: 19px;
  font-size: 13px;
  color: #ef5959;
  width: 247px;
  height: 38px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  line-height: 20px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 301px;
  height: 400px;
  background-color: #fff;
  border-radius: 20px;
}
.btn {
  position: fixed;
  bottom: 16px;
  right: 12px;
}
.btn > button {
  margin-left: 8px;
}
/deep/.van-button {
  width: 86px;
  height: 38px;
  line-height: 38px;
  border-color: #dfdfdf;
  color: #888888;
}
.moneyF {
  width: 100%;
  background-color: #ffffff;
}
.money {
  width: 93.9%;
  height: 57px;
  font-size: 14px;
  color: #888888;
}
.money_num {
  font-size: 16px;
  color: #ff0909;
}
.title {
  width: 100%;
  height: 90px;
  background-color: #0fa0a0;
  font-size: 15px;
  color: #ffffff;
  border-bottom: 7px solid #f2f5fa;
}
.iconfont {
  font-size: 28px;
}
.order_sn {
  font-size: 13px;
  margin-top: 12px;
}
.Departure {
  font-size: 14px;
  color: #333333;
  margin-left: 19px;
}
.ticketTitle {
  width: 100%;
  height: 37px;
  font-size: 14px;
  background-color: #ffffff;
  color: #888888;
  border-bottom: 1px solid #f0f0f0;
}
.arrow {
  width: 67px;
  height: 1px;
  background-color: #0fa1a0;
}
.rotate {
  margin-left: 62.25px;
  width: 4.75px;
  height: 1px;
  background-color: #0fa1a0;
  -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
}
.city {
  font-size: 17px;
  color: #333333;
}
.Station {
  font-size: 13px;
  color: #333333;
  margin-top: 6px;
}
.type {
  font-size: 12px;
  color: #888888;
  margin-top: 6px;
  margin-bottom: 5px;
}
.toTravel {
  position: relative;
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  border-bottom: 1px solid #ededed;
}
.ban {
  position: absolute;
  margin-left: 40%;
}
.overTime {
  width: 100%;
  height: 32px;
  font-size: 13px;
  color: #333333;
  background-color: #ffffff;
  border-bottom: 7px solid #f2f5fa;
}
/deep/.van-cell {
  padding: 12px 12px;
}
/deep/.van-field__label {
  width: 50%;
}
.userInfoF {
  width: 100%;
  background-color: #ffffff;
}
.userInfo {
  width: 93.9%;
  padding: 15px 0;
  font-size: 15px;
  color: #333333;
}
</style>